<template>
  <div class="admin-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">管理员列表</h1>
      <div class="header-actions">
        <div class="search-box">
          <input
            type="text"
            placeholder="请输入管理员名称"
            class="search-input"
            v-model="searchText"
          />
          <input type="text" placeholder="请输入管理员密码" class="search-input" v-model="Mm" />
          <button class="add-btn" @click="addAdmin">
            <span class="btn-icon">+</span>
            添加
          </button>
        </div>
      </div>
    </div>

    <!-- 管理员列表 -->
    <div class="admin-list">
      <div class="list-content">
        <div v-for="item in list" :key="item.adminid" class="list-item">
          <div class="item-cell">
            <span class="admin-name">{{ item.adminname }}</span>
          </div>
          <div class="item-cell actions">
            <button class="delete-btn" @click="deleteAdmin(item.adminid)">删除</button>
            <button class="delete-btn" @click="Xg(item.adminid)">修改</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 编辑弹框 -->
  <div class="modal-overlay" v-show="flag" @click="flag = false">
    <div class="edit-section" @click.stop>
      <input type="text" v-model="mc" placeholder="请输入管理员名称" />
      <input type="text" v-model="gm" placeholder="请输入管理员密码" />
      <button @click="Bc(id)">保存</button>
      <button @click="flag = false">取消</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      list: [],
      searchText: '',
      Mm: '',
      flag: false,
      mc: '',
      gm: '',
      id: null,
    }
  },
  methods: {
    // 添加管理员
    async addAdmin() {
      await axios
        .post('http://47.94.6.186:3001/admin/admin/add', {
          adminname: this.searchText,
          password: this.Mm,
          token: localStorage.getItem('loginToken'),
        })
        .then((res) => {
          console.log(res.data)
          alert(res.data.message)
          this.list.push({
            adminname: this.searchText,
          })
          this.searchText = ''
          this.Mm = ''
        })
    },
    deleteAdmin(id) {
      axios
        .post('http://47.94.6.186:3001/admin/admin/delete', {
          adminid: id,
          token: localStorage.getItem('loginToken'),
        })
        .then((res) => {
          console.log(res.data)
          alert(res.data.message)
          this.list = this.list.filter((item) => item.adminid !== id)
        })
    },
    Xg(id) {
      this.flag = true
      this.mc = this.list.find((item) => item.adminid === id).adminname
      this.gm = this.list.find((item) => item.adminid === id).password
      this.id = id
    },
    Bc(id) {
      axios
        .patch(
          `http://47.94.6.186:3001/admin/admin/update`,
          {
            adminname: this.mc,
            password: this.gm,
            adminid: id,
          },
          {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          },
        )
        .then((res) => {
          console.log(res.data)
          alert(res.data.message)
          this.flag = false
          // 更新本地列表中的数据
          const index = this.list.findIndex((item) => item.adminid === id)
          if (index !== -1) {
            this.list[index].adminname = this.mc
          }
        })
        .catch((error) => {
          console.error('更新失败:', error)
          alert('更新失败，请重试')
        })
    },
  },
  mounted() {
    axios
      .get('http://47.94.6.186:3001/admin/admin/list', {
        headers: {
          token: localStorage.getItem('loginToken'),
        },
      })
      .then((res) => {
        console.log(res.data.data)
        this.list = res.data.data
      })
  },
}
</script>

<style scoped>
.admin-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: 600;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-box {
  display: flex;
  gap: 15px;
  align-items: center;
}

.search-input {
  padding: 10px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  font-size: 14px;
  width: 250px;
  outline: none;
  transition: border-color 0.3s;
}

.search-input:focus {
  border-color: #4caf50;
}

.add-btn {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.admin-list {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.list-content {
  max-height: 600px;
  overflow-y: auto;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s;
}

.list-item:hover {
  background-color: #f8f9fa;
}

.item-cell {
  display: flex;
  align-items: center;
}

.admin-name {
  font-weight: 500;
  color: #333;
}

.actions {
  gap: 10px;
}

.edit-btn,
.delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s;
}

.edit-btn {
  background-color: #e3f2fd;
  color: #1976d2;
  margin-right: 8px;
}

.edit-btn:hover {
  background-color: #1976d2;
  color: white;
}

.delete-btn {
  background-color: #ffebee;
  color: #d32f2f;
}

.delete-btn:hover {
  background-color: #d32f2f;
  color: white;
}

.btn-icon {
  font-size: 14px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-section {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.edit-section input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.edit-section input:focus {
  border-color: #4caf50;
}

.edit-section button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
  margin-right: 10px;
}

.edit-section button:first-of-type {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
}

.edit-section button:first-of-type:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.edit-section button:last-of-type {
  background-color: #f8f9fa;
  color: #666;
  border: 1px solid #e9ecef;
}

.edit-section button:last-of-type:hover {
  background-color: #e9ecef;
}
</style>
